<template>
  <div class="productArticle">
    <div class="container">
      <img :src="changeImgpath(productContent.proimg)" class="proImg">
      <el-row class="fastMessage">
        <el-col :span="12">
          <div class="grid-content inquiry">
            <router-link to="">INQUIRY</router-link>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content message">
            <router-link to="">MESSAGE</router-link>
          </div>
        </el-col>
      </el-row>
      <h2>{{productContent.title}}</h2>
      <h3>Product Description</h3>
      <p>{{ productContent.descrp }}</p>
      <el-card class="box-card feed">
        <p><strong>Output size : </strong>{{ productContent.feed }}</p>
        <p><strong>Production capacity : </strong>{{ productContent.yield }}</p>
      </el-card>
      <h3>MAIN FEATURE</h3>
      <div v-html="productContent.performance" class="mainP">{{ productContent.performance }}</div>
      <h3>APPLICATIONS</h3>
      <p>{{ productContent.applications }}</p>
      <h3>SPECIFICATIONS</h3>
      <el-card class="box-card">
        <p>Please contact us even if you contact us to get your exact needs.</p>
      </el-card>
      <h3>CASE</h3>
      <el-row :gutter="20" class="proCase">
        <el-col :span="12" v-for="(item,index) in news" :key="index">
          <div class="grid-content">
            <router-link :to="'/case/' + (item.id)">
              <img :src="item.img" alt="" class="img-res">
              <p>{{ item.title }}</p>
            </router-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      productContent: {},
      canshuJs: '',
      news: [
        {
          id: 549,
          title: 'Russia Magadan 30-60TPH Hard Stone Mobile Crushing Line',
          img: 'https://www.kefid.com/v3/uploads/allimg/151125/1-1511250Z412453.jpg'
        },
        {
          id: 557,
          title: 'Kefid 250tph granite crushing line in South Africa',
          img: 'https://www.kefid.com/v3/uploads/allimg/151125/1-1511250Z9351T.jpg'
        }
      ]
    }
  },
  async mounted () {
    await axios.get('/product/' + this.$route.params.productId).then(response => {
      this.productContent = response.data.data
      document.title = this.productContent.title
      console.log(response.data.data.specifications)
    }).catch(function (error) {
      console.log(error)
    })
  },

  methods: {
    changeImgpath (img) {
      img = '//www.kefid.com' + img
      return img
    }
  }
}
</script>
<style scoped lang="css">
.container{
  padding-top: 52px;
}
.container h3{
  border-left: 0.2rem solid #db3f28;
  font-size: 1.4rem;
  background: #eee;
  padding: 0.8rem 1rem;
}
.container p{
  font-size: 1.4rem;
}
.container h2{
  color: #db3f28;
}
.container .proImg{
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}
.fastMessage a{
  display: block;
  text-align: center;
  color: #fff;
  padding: 0.8rem 0;
}
.fastMessage .inquiry{
  background: #db3f28;
}
.fastMessage .message{
  background: #444853;
}
.productArticle{
  padding-bottom: 6.6rem;
}
.proCase .el-col-12{
  float: none;
  display: inline-block;
  vertical-align: top;
}
.proCase a{
  color: #333;
  display: block;
}
.proCase {
  font-size: 0;
}
.proCase a p{
  font-size: 1.2rem !important;
}
</style>
<style lang="css">
.mainP,.box-card p{
  font-size: 1.4rem;
}
.feed .el-card__body{
  padding: 0.5rem 1rem;
}
</style>
